<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>新建收款记录</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<style type="text/css">
			body {
				background-color: #f3f3f5;
			}
			.van-search {
				background-color: #f3f3f5;
			}
			.van-search__content {
				background-color: #fff;
				border-radius: 0.08rem;
			}
			.van-empty {
				padding: 1.67rem 0;
			}
			.van-empty__image,
			.van-empty__image > img {
				height: 2.21rem;
				width: 2.21rem;
			}
			.van-empty__description {
				margin-top: 0.33rem;
				padding: 0 0.75rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<van-search
					placeholder="姓名/手机号"
					v-model="keyWord"
					@search="onSearch"
					@clear="onClear"
				></van-search>
				<van-list>
					<van-cell
						v-for="item in list"
						:key="item"
						:title="item.patientsName"
						:value="item.patientsMobile"
						@click="handlePatient(item)"
					></van-cell>
					<van-empty v-if="isEmpty" image="img/search_empty.png">
						<template #description>
							<p style="text-align: center; font-size: 0.33rem">暂无相关患者</p>
							<p
								style="
									text-align: center;
									font-size: 0.33rem;
									margin-top: 0.25rem;
								"
							>
								请扫描患者二维码或登录后台为患者建档
							</p>
						</template>
					</van-empty>
				</van-list>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202208081451"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					list: [],
					keyWord: '',
					isEmpty: false,
					num: 0,
					form: {},
					orgCode: '',
				}
			},
			computed: {},
			created() {
				this.doctorId = url('?id')
				this.orgCode = url('?orgCode')
				this.form = JSON.parse(sessionStorage.getItem('form')) || {}
			},
			methods: {
				getActions() {
					postAction(spliceUrl('/100/12/1001201'), {
						doctorId: this.doctorId,
						orgCode: this.orgCode,
						keyWord: this.keyWord,
					}).then(res => {
						res = res.data
						console.log('getActions', res)
						if (res.success) {
							this.list = res.result.records
							if (res.result.records.length == 0) {
								this.isEmpty = true
							} else {
								this.isEmpty = false
							}
						}
					})
				},
				handlePatient(item) {
					this.form.flowPatientName = item.patientsName
					this.form.flowPatientMobile = item.patientsMobile
					this.form.flowPatientId = item.patientId
					sessionStorage.setItem('form', JSON.stringify(this.form))
					window.location.href =
						'./addFlow.html?id=' + this.doctorId + '&orgCode=' + this.orgCode
				},
				onSearch() {
					this.getActions()
				},
				onClear() {
					this.list = []
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
